<template>
  <div>
    <van-nav-bar :title="$route.meta.title" left-text="返回" left-arrow :fixed="true" :placeholder="true" @click-left="$router.go(-1)" />
    <div>
      <div class="headerbox">
        <div class="header_top" :style="{ width: columns.length * 3 + 'rem' }" v-if="columns && columns.length != 0">
          <div class="header_item" v-for="(item, index) in columns" :key="index" @click="handleClick(index)" :class="tabIndex == index ? 'active' : ''">
            <div class="txt">{{ item.number }}</div>
            <div class="txt1">{{ item.bizDate }}</div>
          </div>
        </div>
      </div>

      <div class="carInfo">
        <div class="carInfo_title">保单信息</div>
        <div class="carInfo_item">保险登记单编号：{{ dataSource.billNumber }}</div>
        <div class="carInfo_item">保险登记人：{{ dataSource.empName }}</div>
        <div class="carInfo_item">保险类型：{{ dataSource.insurance }}</div>
        <div class="carInfo_item">单据状态：{{ dataSource.billStatus }}</div>
        <div class="carInfo_item">保险公司：{{ dataSource.insCmp }}</div>
        <div class="carInfo_item">车架号：{{ dataSource.vinCode }}</div>
        <div class="carInfo_item">客户：{{ dataSource.customerName }}</div>
        <div class="carInfo_item">被保险人：{{ dataSource.insPsn }}</div>
        <div class="carInfo_item">备注：{{ dataSource.remark }}</div>
      </div>
      <div class="tabBarBox">
        <van-tabs v-model="tabActive">
          <van-tab title="支付信息">
            <div class="tabCar">
              <van-field v-model="dataSource.acciInsAmount" name="交强险金额" label="交强险金额" input-align="right" readonly />
              <van-field v-model="dataSource.comInsAmount" name="商业险金额" label="商业险金额" input-align="right" readonly />
              <van-field v-model="dataSource.vehicleTaxAmount" name="车船税" label="车船税" input-align="right" readonly />
              <van-field v-model="dataSource.otherAmt" name="驾意险金额" label="驾意险金额" input-align="right" readonly />
              <van-field v-model="dataSource.rotalReturnAmt" name="返点金额合计" label="返点金额合计" input-align="right" readonly />
              <van-field v-model="dataSource.recAmt" name="已收款金额" label="已收款金额" input-align="right" readonly />
              <van-field v-model="dataSource.invAmt" name="已开票金额" label="已开票金额" input-align="right" readonly />
              <van-field v-model="dataSource.collectionDate" name="收款日期" label="收款日期" input-align="right" readonly />
              <van-field v-model="dataSource.invoiceDate" name="开票日期" label="开票日期" input-align="right" readonly />
            </div>
          </van-tab>
          <van-tab title="险种信息">
            <div class="insInfo">
              <van-field v-model="dataSource.inscmpBillNo" name="商业保险单号" label="商业保险单号" input-align="right" readonly />
              <van-field v-model="dataSource.inscmpAcciBillNo" name="交强险险单号" label="交强险险单号" input-align="right" readonly />
              <table class="tablebox" v-if="dataSource.kdtEntry.length != 0">
                <tr>
                  <th>投保险种</th>
                  <th>保险限额</th>
                  <th>保费金额</th>
                  <th>批增时间</th>
                </tr>
                <tr v-for="(item, index) in dataSource.kdtEntry" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.insLimitAmt }}</td>
                  <td>{{ item.insuranceAmount }}</td>
                  <td>{{ item.addDate }}</td>
                </tr>
              </table>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="goBack" @click="goBack">返回</div>
    </div>
  </div>
</template>

<script>
import sellManageApi from "@/api/sellManageApi";
import { Tab, Tabs } from "vant";
import policyApi from "@/api/policyApi";
export default {
  data() {
    return {
      active: "",
      detailId: "", // 当前单据ID
      orderId: "", // 当前合同订单ID
      desBosType: "", // 单据类型 desBosType
      columns: [],
      tabIndex: 0,
      dataSource: {
        billId: "", //单据ID
        billNumber: "", //单据编码
        bizDate: "", //登记时间
        carNo: "", //车牌号
        insurance: "", //保险类型
        insuranceType: "", //保险分类
        vinCode: "", //车架号
        carModelName: "", //车型
        customerName: "", //客户名称
        mobile: "", //电话
        fixCenterName: "", //维修中心
        insCmp: "", //保险公司
        outBillDateEx: "", //登记时间
        acciInsAmount: "", //交强险金额
        comInsAmount: "", //商业险金额
        vehicleTaxAmount: "", //车船税
        otherAmt: "", //车架意金额
        beginTime: "", //起保日期
        endTime: "-", //终保日期
        insPsn: "", //被保险人
        insPhone: "", //被保险人电话
        totalAmout: "", //总保费
        remake: "", //备注
        isQ3: "", //是否Q3
        bizSrc: "", //业务来源
        directSelling: "", //直销业务
        policyStatus: "", //保单状态
        billStatus: "", //单据状态
        temp: "", //服务顾问
        saleTypes: "", //销售类型
        isTurnIns: "", //是否转报
        dqxOption: "", //盗枪险类型
        rotalReturnAmt: "", //返点金额合计
        recAmt: "", //已开款金额
        invAmt: "", //已开票金额
        collectionDate: "", //收款日期
        invoiceDate: "", //开票日期
        inscmpBillNo: "", //商业保险单号
        inscmpAcciBillNo: "", //交强险单号
        kdtEntry: [
          // {
          //   entryId: "", //分录id
          //   insuranceType: "", //投险投保
          //   insuranceAmount: "", //保费金额
          //   insLimitAmt: "", //保费限额
          //   addDate: "", //批增时间
          //   name: "",
          // },
        ]
      },
      tabActive: 0
    };
  },
  components: { Tab, Tabs },

  mounted() {
    if (this.$route.query) {
      this.detailId = this.$route.query.billId;
      this.orderId = this.$route.query.orderId;
      this.desBosType = this.$route.query.desBosType;
      console.log(this.detailId);
      console.log(this.orderId);
      console.log(this.desBosType);
      // this.getDetail(this.detailId)
      this.getList(this.orderId);
    }
  },
  methods: {
    getDetail() {
      policyApi
        .queryBillInsuranceById({
          billId: this.columns[this.tabIndex].billId //单据Id，必填，String
        })
        .then(res => {
          if (res.data) {
            this.dataSource = res.data;
          }
        });
    },
    getList() {
      // 根据类型ID获取单据列表
      sellManageApi
        .secondHandCarFacade({
          method: "getDestInfoBySourceIdAndDestBosType", //固定值
          userId: "", //用户ID，必填，String
          orgId: "", //登录组织Id，必填，String
          billId: this.orderId, //单据Id，必填，String
          desBosType: this.desBosType
        })
        .then(res => {
          if (res.code == 1) {
            if (res.data.length >= 1) {
              this.columns = res.data;
              this.getDetail();
            } else {
              this.$toast.fail("暂无该单据");
            }
          } else {
            this.$toast.fail("暂无该单据");
          }
        });
    },
    handleClick(index) {
      this.tabIndex = index;
      this.getDetail();
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.headerbox {
  width: 100%;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.header_top {
  display: flex;
  align-self: center;
  padding: 10px;
  overflow-x: auto;
  // width: 12rem;
  .header_item {
    width: 150px;
    background: #fff;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    margin-right: 10px;
    .txt {
      margin-bottom: 5px;
    }
    &.active {
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
  }
}
.carInfo {
  padding: 10px;
  background: #fff;
  margin-bottom: 10px;
  .source {
    padding-left: 0 !important;
    margin-bottom: 10px;
    justify-content: space-between;

    .source_txt {
      font-size: 16px;
    }
  }

  .carInfo_No {
    margin-bottom: 15px;
    .carInfo_No_item {
      border-right: 1px solid #ccc;
      padding-right: 5px;
      margin-right: 5px;
      font-size: 16px;
      color: #333;
      &:last-child {
        border: none;
      }
    }
  }
  .carInfo_item {
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
    .carInfo_item_price {
      width: 50%;
    }
  }
  .carInfo_title {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
  }
}
.goBack {
  width: 80%;
  background: #2381e6;
  color: #fff;
  font-size: 16px;
  margin: auto;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 25px;
}
.tablebox {
  width: 95%;
  margin: auto;
  border-collapse: collapse;
  text-align: center;

  tr {
    th {
      font-size: 12px;
      border: 1px solid #ccc;
      padding: 10px 0;
      background: #f1f1f1;
    }
    td {
      padding: 5px 0;
      border: 1px solid #ccc;
      font-size: 12px;
    }
  }
}
</style>
